<template>
  <div class="star-wars-box">
    <header class="header">
      <NButton>初始化</NButton>
    </header>
    <main class="main">
      <AirEarth></AirEarth>
    </main>
  </div>
</template>

<script setup lang="ts">
import AirEarth from "@/components/AirEarth.vue";
import service from "../servers";
import type { Viewer } from "cesium";
import { onMounted } from "vue";
import { NButton } from "naive-ui";

const earth = service("earth");

let viewer: Viewer | null = null;

onMounted(() => {
  viewer = earth();
  initScene();
});
const initScene = () => {
  const tle: [string, string] = [
    "1 44761U 19074BA  25075.18838499 -.00001446  00000+0 -78238-4 0  9990",
    "2 44761  12.0551  35.9913 0001426  92.6447 267.4705 15.06384047294169",
  ];
  const entity1 = viewer?.viewerMixins.addSatelliteFromTle!(tle, "#fff");
  const tle1: [string, string] = [
    "1 44761U 19074BA  25075.18838499 -.00001446  00000+0 -78238-4 0  9990",
    "2 44761  32.0551  35.9913 0001426  82.6447 267.4705 15.06384047294169",
  ];
  const entity2 = viewer?.viewerMixins.addSatelliteFromTle!(tle1, "#fff");
  const tle2: [string, string] = [
    "1 44761U 19074BA  25075.18838499 -.00001446  00000+0 -78238-4 0  9990",
    "2 44761  62.0551  35.9913 0001426 102.6447 267.4705 15.06384047294169",
  ];
  const entity3 = viewer?.viewerMixins.addSatelliteFromTle!(tle2, "#fff");
  const tle3: [string, string] = [
    "1 53490U 22099AB  25075.90280410  .00000850  00000+0  70747-4 0  9997",
    "2 53490  98.6548 108.8368 0003897 125.0075 130.0808 15.01262314142304",
  ];
  const entity4 = viewer?.viewerMixins.addSatelliteFromTle!(tle3, "#f00");

  viewer?.viewerMixins.addLaserEffect!(entity2!, entity4!, "#FF0000");
  viewer?.viewerMixins.addInterferenceEffect!(entity3!, entity4!, "#FFD700");
  viewer?.viewerMixins.addDetectionEffect!(entity1!, entity4!, "#90EE90");
};
</script>

<style scoped lang="scss">
.star-wars-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    height: 50px;
    background-color: #000;
  }
  .main {
    position: relative;
    height: calc(100% - 50px);
  }
}
</style>
